<%inherit file="base.html"/>

<%block name="content">
        <style>
            .chart-wrapper {
                height: 350px;
                -webkit-tap-highlight-color: transparent;
                user-select: none;
                cursor: default;
                background-color: rgba(0, 0, 0, 0);
            }
        </style>
        <div class="king-layout2-main mt15" style="width:960px;">
            <div class="container-fluid mb0 ">
                <form method="post" action="">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">选择业务：</label>
                            <div class="col-sm-9">
                                <select name="bk_biz_id" id="bk_biz_id" class="form-control bk-valign-top">
                                    % for biz in bizs:
                                        <option value="${biz['bk_biz_id']}" ${'selected' if ( int(biz['bk_biz_id']) == int(bkBizId) ) else ''}>${biz['bk_biz_name']}</option>
                                    % endfor
                                </select>
                            </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">输入内网IP：</label>
                            <div class="col-sm-9">
                                <input type="text" name="ip"  class="form-control bk-valign-top" id="ip" placeholder="仅支持内部IP查询" value="${ip}"> </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="submit" class="king-btn mr10  king-success">查询</button>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>
            <div class="panel panel-default mb0">
                <div class="panel-heading"> 查询结果</div>
                <div class="panel-body">
                    <div class="container-fluid mb0 " id="chart-container">
					
                    </div>
                </div>
            </div>
        </div>
<script>
    function createEStandLineChart(data) {
        var iDiv = document.createElement('div');
        iDiv.id = data.ip;
        iDiv.className = 'king-chart-box chart-area chart-wrapper';
        document.getElementById('chart-container').appendChild(iDiv);

        var myChart = echarts.init(iDiv);

        myChart.setOption({
            title: {
                show: true,
                text: data.ip
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                y: 'bottom',
                data: ['cpu', 'mem', 'disk']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    // magicType: {show: true, type: ['bar', 'line']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: data.x_axis
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show: true}
                }
            ],
            series: data.series
        });
    }

    $(function () {
        var bk_biz_id = $("#bk_biz_id").val();
        var ip = $("#ip").val();

        $.post('${SITE_URL}get_host_stat', {
             'bk_biz_id': bk_biz_id,
             'ip': ip
        }, function (res) {
            if (res.result) {
                var data = res.data;
                for (var i = 0; i < data.length; i++) {
                    createEStandLineChart(data[i])
                }
            } else {
                alert(res.message);
            }
        }, 'json');
    });
</script>
</%block>